 <template>
  <div >
    <div class="condition">
      <p class="text-info"><i class="el-icon-info"></i> 菜单列表-{{group_data.title}}</p>
      <br />
      <el-button
        type="primary"
        @click="add(pid)"
      >添加菜单</el-button>
    </div>

    <el-table
          v-loading="loading"

      :data="data"
      row-key="id"
      :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
    >
      <el-table-column
        label="菜单名称"
        prop="label"
      >
      </el-table-column>
      <el-table-column
        label="路由"
        prop="route"
      ></el-table-column>
      <el-table-column
        label="权限"
        prop="is_auth"
      >
        <template slot-scope="{row}">
          <el-tag
            :type="row.is_auth?'':'info'"
            effect="plain"
          >{{row.is_auth?"验证":"不验证"}}</el-tag>
        </template>
      </el-table-column>
      <el-table-column
        label="状态"
        prop="status"
      >
        <template slot-scope="{row}">
          <el-switch
            v-model="row.status"
            active-color="#13ce66"
            inactive-color="#ff4949"
            @change="changeStatus(row.id)"
          ></el-switch>

        </template>
      </el-table-column>
      <el-table-column label="操作" prop="id">
        <template slot-scope="{row}">
          <table-action :row="row" :deleteProps="deleteProps" @deleteItem="deleteItem" @editItem="editItem"></table-action>
        </template>
      </el-table-column>
    </el-table>

  </div>
</template>
 
 <script>
import { treeMenu, addMenu,menuSetStatus } from "@/api";
import addPage from "./add";
import editPage from "./edit"
import tableAction from "@/components/table/action"
export default {
  components: { addPage,tableAction },
  data() {
    return {
      loading:true,
      pid: 0,
      data: [],
      deleteProps:{
        message:"确定删除该菜单吗？"
      },
      addModal: {
        title: "添加菜单",
        component: addPage,
        data: {
          pid: 0,
          gid: 0
        },
        close: this.search,
        width: "680px"
      },
        editModal: {
        title: "编辑菜单",
        component: editPage,
        data: {
          id:0
        },
        close: this.search,
        width: "680px"
      }
    };
  },
  props: ["id", "group_data"],
  created() {
    this.search();
  },
  methods: {
    search() {
      this.loading = true;
      treeMenu(
        this.id,
        res => {
          this.loading = false;
          if (res.code * 1 === 1) {
            this.data = res.data.tree;
          }
        },
        err => {}
      );
    },
    add(pid) {
      this.addModal.data.pid = pid;
      this.addModal.data.gid = this.id;
      this.$drawer(this.addModal);
    },
    changeStatus(id){
      this.loading = true;
      menuSetStatus(id,res=>{
        this.loading = false;
      },err=>{
        this.loading = false;
      })
    },
    editItem(row){
      this.editModal.title = "编辑菜单-"+row.label
      this.editModal.data = {
        id:row.id
      }
      this.$drawer(this.editModal)
    },
    deleteItem(id){
      
    },
  }
};
</script>
 
 <style lang="scss" scoped>
</style>
